<template>
  <div class="recommend">
    <titles :title="title"></titles>
    <div class="insurance">
      <div class="jd-insurance">
        <span class="label">今日推荐</span>
        <p class="title">100万</p>
        <p class="subtitle">京东账户安全险</p>
        <div class="btn">立即查看</div>
      </div>
      <div class="insurancelist">
        <div class="insuranceitem" v-for="item of insuranceList" :key="item.id">
          <img :src="item.url" alt="">
          <p>{{item.desc}}</p>
        </div>
      </div>
    </div>
    <div class="img">
      <img src="https://img12.360buyimg.com/jrpmobile/jfs/t1/12124/17/11858/46303/5c92faf7E65f4674a/94bc59efd2d056e9.jpg?width=750&height=200" alt="">
    </div>
    <swiper-list :List="list"></swiper-list>
  </div>
</template>

<script>
import Titles from './Titles'
import SwiperList from './SwiperTemplate'
export default {
  name: 'Bank',
  data () {
    return {
      title: {
        titleinfo: '保险保障',
        subtitle: ''
      },
      list: [
        {
          id: '001',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/24464/26/8171/23261/5c73b40dEddca0b4d/d23341c0ec8932e9.jpg?width=210&height=260'
        },
        {
          id: '002',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/19379/16/8191/19539/5c73b4aaEb1b3cb27/f2566275b974eae8.jpg?width=210&height=260'
        },
        {
          id: '003',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/22706/31/8158/20065/5c73b4d1Ecd7b7948/eb412d04d9e5a9c3.jpg?width=210&height=260'
        },
        {
          id: '004',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/19123/13/8083/20016/5c73b514E0bd4cac9/a2e2b5da65c36580.jpg?width=210&height=260'
        }
      ],
      insuranceList: [
        {
          id: '001',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t8881/304/1359242815/2540/5ef07179/59b90050N62f41061.png?width=56&height=56',
          desc: '车险'
        },
        {
          id: '002',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t9040/57/2313007861/3024/82c36c44/59ca556eNb605e901.png?width=56&height=56',
          desc: '人寿'
        },
        {
          id: '003',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t9283/283/1383600733/3117/82a51164/59b900cfNe88db318.png?width=56&height=56',
          desc: '意外'
        },
        {
          id: '004',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t8929/33/1393593833/1749/1e115bd7/59b900e6N73c7b311.png?width=56&height=56',
          desc: '财产'
        },
        {
          id: '005',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t8902/275/1411242449/2807/a2cc902a/59b90111N4e88098c.png?width=56&height=56',
          desc: '健康'
        },
        {
          id: '006',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t8962/170/1384497943/2594/aa2a2ad9/59b9011bNf3b01bea.png?width=56&height=56',
          desc: '旅行'
        }
      ]
    }
  },
  components: {
    Titles,
    SwiperList
  }
}
</script>

<style lang="stylus" scoped>
  .recommend
    margin-bottom 120px
    .insurance
      display flex
      overflow hidden
      background #f5f5f5
      .jd-insurance
        width 30%
        height 260px
        margin 0 15px 15px 30px
        background #fff
        .label
          font-size 26px
          color #fff
          text-align center
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
          padding 0px 10px
          background #000
          line-height 40px
        .title
          font-size 45px
          font-weight 700
          color #1bd5c7
          margin-top 30px
          margin-bottom 15px
          text-align center
        .subtitle
          font-size 24px
          text-align center
          margin-bottom 25px
        .btn
          width 164px
          height 50px
          font-size 24px
          display flex
          justify-content center
          align-items center
          background #1bd5c7
          color #fff
          border-radius 30px
          margin 0 auto
      .insurancelist
        width 70%
        height 260px
        margin-right 30px
        background #fff
        display flex
        flex-wrap wrap
        .insuranceitem
          width 155px
          height 130px
          display flex
          flex-direction column
          align-items center
          justify-content center
          p
            padding-top 5px
</style>
